<template>
    <view class="globe_back">
        <view class="box">
            <view class="skill">
                <view class="title">我的技能</view>
                <view class="skillBox">
                    <u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
                        <u-checkbox
                            :customStyle="{ marginBottom: '8px', width: '33%' }"
                            v-for="(item, index) in checkboxList1"
                            :key="index"
                            :label="item.name"
                            :name="item.name"
                        ></u-checkbox>
                    </u-checkbox-group>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            checkboxValue1: [],
            // 基本案列数据
            checkboxList1: [
                {
                    name: '开锁',
                    disabled: false
                },
                {
                    name: '拖车',
                    disabled: false
                },
                {
                    name: '故障检测',
                    disabled: false
                },
                {
                    name: '搭火',
                    disabled: false
                },
                {
                    name: '补胎',
                    disabled: false
                },
                {
                    name: '换电池',
                    disabled: false
                }
            ]
        };
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-checkbox-group {
    flex-wrap: wrap !important;
}
.box {
    padding: 32rpx;
}
.skill {
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
    .title {
        color: #333a47;
        font-size: 28rpx;
    }
    .skillBox {
        margin-top: 24rpx;
    }
}
</style>
